<template>
    <div style="margin-top:20px;">
        <Row :gutter="16">
            <Col span="4" style="font-size:14px;color:#697786;">风险销号：{{levelTotal}}条</Col>
            <Col span="4" offset="12" v-show="personType == 1">
                <Select v-model="formData.enterpriseId" ref="treeSelect" placeholder="公司名称">
                    <Option v-for="item in list1" :value="item.enterpriseId" :key="item.enterpriseId" style="display: none;">
                        {{ item.title }}
                    </Option>
                    <Tree :data="orgList" ref="tree" style="padding:0 10px" @on-select-change="checkEng"></Tree>
                </Select>
            </Col>
            <Col span="4" :offset="personType != 1 ? 16 : 0">
                <Select v-model="formData.projectTeamId" :clearable="(proList.length>0 && personType !=3) || (proList.length>1 && personType ==3)" placeholder="全部项目" @on-change="destroyStatisticsAnalysis()">
                    <Option v-for="item in proList" :value="item.id" :key="item.id">
                        {{ item.shortName }}
                    </Option>
                </Select>
            </Col>
        </Row>
        <Row :gutter="20" style="margin-top:20px;">
            <Col span="8" class="echarts-box">
                <div style="background-color: rgba(0, 59, 152, 0.02);">
                    <div class="typeSanBox" v-if="objData.levelTotal ? Object.keys(objData.levelTotal).length <= 1 : ''">
                        <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">风险等级</span>
                        <div>
                            <img src="../../../assets/images/process-no-data.png" />
                            <span>暂无数据</span>
                        </div>
                    </div>
                    <v-chart v-else ref="e1" :style="{width:'100%',height: '360px',}" :options="options" :auto-resize="true"></v-chart>
                </div>
            </Col>
            <Col span="8" class="echarts-box">
                <div style="background-color: rgba(0, 59, 152, 0.02);">
                    <div class="typeSanBox" v-if="objData.typeTotal ? objData.typeTotal.length <= 0 : ''">
                        <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">风险类型</span>
                        <div>
                            <img src="../../../assets/images/process-no-data.png" />
                            <span>暂无数据</span>
                        </div>
                    </div>
                    <v-chart v-else ref="e2" :style="{width:'100%',height: '360px',}" :options="options1" :auto-resize="true"></v-chart>
                </div>
            </Col>
            <Col span="8" class="echarts-box">
                <div style="background-color: rgba(0, 59, 152, 0.02);">
                    <div class="typeSanBox" v-if="objData.categoryTotal ? objData.categoryTotal.length <= 0 : ''">
                        <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">风险类别</span>
                        <div>
                            <img src="../../../assets/images/process-no-data.png" />
                            <span>暂无数据</span>
                        </div>
                    </div>
                    <v-chart v-else ref="e3" :style="{width:'100%',height: '360px',}" :options="options2" :auto-resize="true"></v-chart>
                </div>
            </Col>
        </Row>
        <Row style="margin-top:20px;">
            <Col span="24" class="echarts-box" style="background-color: rgba(0, 59, 152, 0.02);padding-top:5px;">
                <div class="typeSanBox" v-if="objData.trendTotal ? objData.trendTotal.length <= 0 : ''">
                    <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">风险销号趋势</span>
                    <div>
                        <img src="../../../assets/images/process-no-data.png" />
                        <span>暂无数据</span>
                    </div>
                </div>
                <v-chart v-else ref="e4" :style="{width:'100%',height: '360px',}" :options="options3" :auto-resize="true"></v-chart>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            cityList:[],
            options: {},
            options1:{},
            options2:{},
            options3:{},
            formData:{
                enterpriseId:'',
                projectTeamId:'',
            },
            userDetail:JSON.parse(localStorage.getItem('userList')),
            personType:JSON.parse(localStorage.getItem('personType')),
            orgList:[],
            list1:[],
            proList: [], //项目部树
            objData:{},
            levelTotal:0
        }
    },
    mounted(){
        window.addEventListener("resize", this.resizeTheChart)
        //1集团 2工程公司 3项目部
        if (this.personType === 3) {
            this.getProTree({objectId:this.userDetail.projectTeamId})
            if(this.userDetail.userInOrgType == 'PROJECT_TEAM_USER'){
                this.formData.enterpriseId = this.userDetail.projectTeamId
            }else{
                this.formData.enterpriseId = this.userDetail.enterpriseId
            }
        }else if(this.personType === 1){
            this.getOrgTree();
        }else if(this.personType === 2){
            this.getProTree({objectId:this.userDetail.enterpriseId})
            this.formData.enterpriseId = this.userDetail.enterpriseId
        }
    },
    methods:{
        //机构树
        getOrgTree() {
            this.orgList = [];
            this.list1 = [];
            this.$api.measurePlan.getOrgTree().then((res) => {
            if (res.code == 200) {
                this.orgList = res.data
                const tree = this.$refs.tree
                this.$nextTick(() =>  tree.handleSelect(tree.data[0].nodeKey))
            } else {
                this.$Message.error(res.data.msg);
            }
            })
        },
        checkEng(data) {//点击机构树
            if (data.length > 0) {
                this.formData.projectTeamId = '';
                this.list1 = []
                let title = data[0].title
                if(data[0].objectId){
                    let enterpriseId = data[0].objectId
                    this.list1.push({
                        title,
                        enterpriseId
                    })
                    this.getProTree(data[0]);
                    this.formData.enterpriseId = enterpriseId
                    this.$refs.treeSelect.visible = false
                }else {
                    this.$Message.warning('请选择'+title+'下的子集')
                }
            }
        },
        //获取项目树
        getProTree(data) {
            this.proList = [];
            this.$api.measurePlan.getProList(data.objectId).then(res => {
            if (res.code === 200) {
                if(res.data.length>0){
                    this.proList = res.data;
                    if(this.proList.length == 1 && this.personType === 3){
                        this.formData.projectTeamId = this.proList[0].id;
                    }
                    this.destroyStatisticsAnalysis()
                }
            } else {
                this.$Message.error(res.message)
            }
            })
        },
        // 销号统计
        destroyStatisticsAnalysis(){
            if(this.formData.projectTeamId == undefined || this.formData.projectTeamId == null){
                this.formData.projectTeamId = ''
            }
            this.$api.statisticsAnalysis.destroyStatisticsAnalysis(this.formData).then(resp=>{
                if(resp.code == 200){
                    this.levelTotal = resp.data.levelTotal.count_0
                    this.objData = resp.data
                    this.pieChart8()
                    this.pieChart9()
                    this.pieChart10()
                    this.drawLine()
                }
            })
        },
        resizeTheChart(){
            if (this.$refs.e1) {
                this.$refs.e1.resize()
            }
            if (this.$refs.e2) {
                this.$refs.e2.resize()
            }
            if (this.$refs.e3) {
                this.$refs.e3.resize()
            }
            if (this.$refs.e4) {
                this.$refs.e4.resize()
            }
        },
        pieChart8(){
            let self = this
            this.options = {
                title: {
                    text: '风险等级',
                    subtext: '',
                    left: 'left',
                    textStyle:{
                        fontWeight:'bold',
                        color:'#697786',
                        fontSize:12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 80,
                    bottom: 20,
                    data: ['I级','II级','III级','IV级']
                },
                series: [
                    {
                        name: '风险等级',
                        type: 'pie',
                        radius: ['35%', '50%'],//设置饼图大小
                        center: ['40%', '50%'],//设置饼图位置
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '0',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: self.objData.levelTotal.count_1, name: 'I级',itemStyle:{color:"#FF5E5E"}},
                            {value: self.objData.levelTotal.count_2, name: 'II级', itemStyle:{color:"#FF9C58"}},
                            {value: self.objData.levelTotal.count_3, name: 'III级', itemStyle:{color:"#FFE558"}},
                            {value: self.objData.levelTotal.count_4, name: 'IV级', itemStyle:{color:"#6096D5"}},
                        ]
                    }
                ]
            }
        },
        pieChart9(){
            let self = this,legendData = [],seriesData = [],colorArr = ['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E8684A','#6DC8EC']
            self.objData.typeTotal.forEach((e,index)=>{
                let name = ''
                name = e.name
                let obj = {
                    value:e.count,
                    name:name,
                    itemStyle:{
                        color:colorArr[index]
                    }
                }
                legendData.push(name)
                seriesData.push(obj)
            })
            this.options1 = {
                title: {
                    text: '风险类型',
                    subtext: '',
                    left: 'left',
                    textStyle:{
                        fontWeight:'bold',
                        color:'#697786',
                        fontSize:12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 80,
                    bottom: 20,
                    data: legendData,
                    formatter: function (name) {
                        if (name.length > 4) {
                            name =  name.slice(0,3) + '...';
                        }
                        return name
                    },
                },
                series: [
                    {
                        name: '风险类型',
                        type: 'pie',
                        radius: ['35%', '50%'],//设置饼图大小
                        center: ['40%', '50%'],//设置饼图位置
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '0',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: seriesData
                    }
                ]
            }
        },
        pieChart10(){
            let self = this,legendData = [],seriesData = [],colorArr = ['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E8684A','#6DC8EC']
            self.objData.categoryTotal.forEach((e,index)=>{
                let name = ''
                name = e.name
                let obj = {
                    value:e.count,
                    name:name,
                    itemStyle:{
                        color:colorArr[index]
                    }
                }
                legendData.push(name)
                seriesData.push(obj)
            })
            this.options2 = {
                title: {
                    text: '风险类别',
                    subtext: '',
                    left: 'left',
                    textStyle:{
                        fontWeight:'bold',
                        color:'#697786',
                        fontSize:12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 80,
                    bottom: 20,
                    data: legendData,
                    formatter: function (name) {
                        if (name.length > 4) {
                            name =  name.slice(0,3) + '...';
                        }
                        return name
                    },
                },
                series: [
                    {
                        name: '风险类型',
                        type: 'pie',
                        radius: ['35%', '50%'],//设置饼图大小
                        center: ['40%', '50%'],//设置饼图位置
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '0',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: seriesData
                    }
                ]
            }
        },
         drawLine(){
            let self = this,xAxisData = [],seriesData1 = [],seriesData2 = []
            self.objData.trendTotal.forEach((e,index)=>{
                seriesData1.push(e.launchCount)
                seriesData2.push(e.destroyCount)
                xAxisData.push(e.name)
            })
            this.options3 = {
                title: { 
                    text: '',
                    subtext: '风险销号趋势',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['销号审核', '风险销号']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData,
                    axisLine: {  
                        lineStyle: {
                            color: "#A0A4AA",
                        }
                    },
                    axisTick:{
                        "show":false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {  //这是y轴文字颜色
                        lineStyle: {
                            color: "#A0A4AA",
                        },
                        "show":false
                    },
                    axisTick:{
                        "show":false
                    }
                },
                series: [
                    {
                        name: '销号审核',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#8cd5c2', //改变折线点的颜色
                                lineStyle: {
                                    color: '#8cd5c2' //改变折线颜色
                                }
                            }
                        },
                        data: seriesData1
                    },
                    {
                        name: '风险销号',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#5B8FF9', //改变折线点的颜色
                                lineStyle: {
                                    color: '#5B8FF9' //改变折线颜色
                                }
                            }
                        },
                        data: seriesData2
                    },
                ]
            }
        },
    }
}
</script>
<style scoped>
#myChart{
    width: 100%;
}

</style>